<template>
  <view class="container">

    <!-- Navigation Icons -->
    <view class="nav-icons">
      <view class="logo">
        logo
      </view>
      <view class="ite">
        <view class="nav-item" v-for="(item, index) in navItems" :key="index">
          <image :src="item.icon" class="nav-icon"></image>
          <text class="nav-text">{{item.text}}</text>
        </view>
      </view>
    </view>

    <!-- New Section -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">New.</text>
        <text class="section-subtitle">平台活动</text>
      </view>
      <view class="new-grid">
        <view class="new-large"></view>
        <view class="new-small-container">
          <view class="new-small"></view>
          <view class="new-small"></view>
        </view>
      </view>
    </view>

    <!-- Tea.bit Section -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">Tea.bit</text>
        <text class="section-subtitle">茶比特系列</text>
      </view>
      <view class="tea-banner"></view>
      <view class="product-list">
        <view class="product-item" v-for="(item, index) in 3" :key="index">
          <image class="product-image"></image>
          <view class="product-info">
            <text class="product-title">这里是产品名称</text>
            <text class="product-desc">这里是产品品高介绍语</text>
            <view class="product-price-row">
              <text class="product-price">¥ 1446.8</text>
              <text class="product-points">送888积分</text>
            </view>
            <button class="buy-button">立即购买</button>
          </view>
        </view>
      </view>
    </view>

    <!-- Zero Section -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">Zero.</text>
        <text class="section-subtitle">001系列</text>
      </view>
      <view class="zero-banner"></view>
      <view class="product-list">
        <view class="product-item" v-for="(item, index) in 3" :key="index">
          <image class="product-image"></image>
          <view class="product-info">
            <text class="product-title">这里是产品名称</text>
            <text class="product-desc">这里是产品品高介绍语</text>
            <view class="product-price-row">
              <text class="product-price">¥ 1446.8</text>
              <text class="product-points">送888积分</text>
            </view>
            <button class="buy-button">立即购买</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      navItems: [
        { icon: '/static/icons/new.png', text: 'NEW' },
        { icon: '/static/icons/dollar.png', text: '赚积分' },
        { icon: '/static/icons/leaf.png', text: 'TEA+1' },
        { icon: '/static/icons/gift.png', text: '代理申请' },
        { icon: '/static/icons/share.png', text: '品鉴分享' }
      ],
    }
  }
}
</script>

<style>
@import url(./index.css);
</style>